<template>
    <div class="headtop">
        <div class="headbody">
            <div>
                <van-image width="6rem" height="6rem" fit="cover" radius="1.2rem" :src="user.avatar_url" />
            </div>
            <div>
                <p class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-light text-shadow-lg">{{
                    proxy.$user.value.username }}</p>
                <p class="text-light/80 text-lg text-shadow-lg">账号：{{ proxy.$user.value.email }}</p>
            </div>
        </div>
        <van-button round color="red" size='small' @click="LoginOut">退出登录</van-button>
    </div>

    <router-link to="/user/idedit" class="router-link">
        <van-icon name="manager-o" size="2rem" />
        &nbsp;&nbsp;
        账户信息
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user/userprofile" class="router-link">
        <van-icon name="edit" size="2rem" />
        &nbsp;&nbsp;
        资料编辑
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user/passwordedit" class="router-link">
        <van-icon name="lock" size="2rem" />
        &nbsp;&nbsp;
        修改密码
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link :to="`/user/userinfo/?userid=${user.id}`" class="router-link">
        <van-icon name="records" size="2rem" />
        &nbsp;&nbsp;
        我发布的
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link :to="`/user/followlist/?userid=${user.id}`" class="router-link">
        <van-icon name="like" size="2rem" />
        &nbsp;&nbsp;
        我的关注
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user" class="router-link" @click="hotel">
        <van-icon name="shield-o" size="2rem" />
        &nbsp;&nbsp;
        账号诊断
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="#" class="router-link" @click="DeleteCode">
        <van-icon name="close" size="2rem" />
        &nbsp;&nbsp;
        注销账号
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <van-popup @close="PopupClose" v-model:show="show" round :style="{ padding: '4rem' }" class="del-p"
        style='background-color: rgb(25, 25, 25)'>
        <van-field v-model="code" placeholder="请输入验证码" autofocus
            style='background-color: rgba(255, 255, 255,0.6);height: 3rem;width: 16rem;border-radius: 1rem;font-size: 1.5rem;outline: 3px solid #F97823;' />
        <van-button round color="red" size='small' @click="DeleteUser"
            style="margin-top: 1.5rem;width: 6rem;font-size: 1rem;">确认注销</van-button>
    </van-popup>

    <Tabbar></Tabbar>
</template>

<script setup>
import '/public/assets/js/all.js';

const { proxy } = getCurrentInstance();

const user = proxy.$user.value;
const show = ref(false);//控制弹层
const code = ref();//验证码

const hotel = () => {
    proxy.$toast('功能正在开发中');
}

// 退出登录
const LoginOut = () => {
    proxy.$confirm({
        title: '退出登录',
        message: '是否退出当前登录？'
    }).then(() => {
        proxy.$user.value = {};
        proxy.$success('退出登录成功');
        setTimeout(() => {
            proxy.$router.push('/login');
        }, 1000);
    }).catch(() => {
        // on cancel
        proxy.$fail('取消退出登录');
    })
}

//注销账号
//验证码发送
const DeleteCode = () => {
    proxy.$confirm({
        title: '注销账号',
        message: '是否注销当前账号？\n\n注意事项：\n1. 注销后所有数据将永久删除，无法恢复\n2. 注销操作不可逆，确认后将发送验证码\n3. 请确保已备份重要信息，确认验证码后立即生效'
    }).then(async () => {
        const email = user.email;

        const res = await proxy.$http.post({
            url: '/code/send',
            params: { email: email, type: 'delete' }
        })

        if (res.code == 1) {
            proxy.$toast('验证码已发送，请注意查收', setTimeout(() => { show.value = true; }, 1500));
        } else {
            proxy.$toast(res.msg);
        }

    }).catch(() => {
        proxy.$fail('取消注销');
    })
}

// 弹层关闭,触发提示
const PopupClose = () => {
    proxy.$toast('已取消');
}
//注销
const DeleteUser = async () => {
    const data = {
        email: user.email,
        code: code.value,
        id: user.id,
    }
    if (!code.value) {
        proxy.$toast('验证码不能为空');
        return;
    }
    const res = await proxy.$http.post({
        url: '/user/deleteuser',
        params: data
    })
    if (res.code == 1) {
        proxy.$user.value = {};
        proxy.$toast('注销成功');
        show.value = false;
        setTimeout(() => {
            proxy.$router.push('/login');
        }, 1000);
    } else {
        proxy.$toast(res.msg);
    }
}


</script>

<style scoped>
@import url(/public/assets/css/all.css);

.headtop {
    width: 100%;
    height: 12rem;
    background-color: rgb(25, 25, 25);
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 处理bug */
    margin-bottom: 0.5rem;
}

.headbody {
    display: flex;
    width: 100%;
    height: 6rem;
    margin-top: 1.5rem;
}

.headbody div {
    margin-left: 0.5rem;
}

.headbody p:nth-child(1) {
    font-size: 1.5rem;
    line-height: 3rem;
    /* 缩进 */
    text-indent: 0.8rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.headbody p:nth-child(2) {
    font-size: 1rem;
    line-height: 3rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

.headtop button {
    margin-left: 8rem;
    margin-top: 0.5rem
}

.router-link {
    display: block;
    width: 100%;
    height: 4.5rem;
    font-size: 1.2rem;
    line-height: 4.5rem;
    background-color: rgba(25, 25, 25);
    border-top: rgba(255, 255, 255, 0.1) solid 0.1rem;
    color: aliceblue;
}

.right-icon {
    float: right;
    margin-right: 1rem;
    line-height: 4rem;
}

.del-p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
